<template>
	<view v-if="!configComplete && !isLogin" class="loading-box">
		<u-loading mode="circle" :show="true" size="80"></u-loading>
	</view>
	<view v-else-if="configComplete && isLogin" class="page-index" :style="'background-image: url('+ config.index_bc + ')'">
		<u-swiper :list="config.banner_list" height="525"></u-swiper>
		<view class="info-box" :style="'border-color:' + config.index_border_color" @click="toPage('/pages/my/my')">
			<view class="head-box">
				<view class="head">
					<view class="left">
						<view class="item">
							<u-avatar :src="userInfo.headImg" :size="88"></u-avatar>
							<view class="text">
								<text class="name">{{userInfo.realName}}</text>
								<text class="area">{{userInfo.area}}</text>
							</view>
						</view>
						<view>
							<!-- <view style="font-size: 24rpx;">{{userInfo.company}}</view> -->
							<view>目标：{{config.target_steps}}步</view>
						</view>
					</view>
					<view class="right">
						<u-circle-progress v-if="!showPopup" :active-color="config.circle_progress_color" :percent="percent" :width="172"
							:border-width="10">
							<view class="progress-content" :style="'color:'+config.circle_progress_color">
								{{todaySteps}}
							</view>
						</u-circle-progress>
						<image class="icon" :src="config.right_icon_1" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="bottom-text">
					<image class="icon" src="../../static/images/love.png" mode="scaleToFill"></image>
					<text class="b-tips">感谢您为汇志凌云公益基金所捐赠的{{money}}元钱 {{new Date() | date}}</text>
				</view>
			</view>
		</view>
		<view class="title-box">
			<view class="title">
				<view class="text">
					分区排行
				</view>
				<view class="tips">
					按分区平均步数排名
				</view>
			</view>
			<view class="more" @click="toPage('/pages/ranking/dpRanking')">
				<text class="more-text" :style="'color:#333333'">更多</text>
				<image class="icon" :src="config.index_more_icon" mode="scaleToFill"></image>
			</view>
		</view>
		<scroll-view scroll-y="true"  class="list-box">
			<view class="item-box">
				<view class="top-three-item" v-for="(item,index) in topList" :key="index" @click="toPage('/pages/ranking/ranking?aid='+item.aid + '&name=' + item.area)" :style="'background-image: url('+ config.top_three_item_border + ')'">
					<view class="content-box">
						<view class="item-info-box">
							<view class="left">
								<view class="title">
									{{item.area}}
								</view>
								<view class="user-head-list">
									<template v-for="(one, i) in item.userInfoList">
										<u-avatar v-if="one.headImg" :key="i" class="head-item" :src="one.headImg" :size="70" :style="{left: ((i + 1) * 18)  + 'rpx'}"></u-avatar>
									</template>
								</view>
							</view>
							<view class="right">
								<u-avatar mode="square" :src="config[iconList[index]]" :size="160"></u-avatar>
							</view>
						</view>
						<view class="progress-box">
							<!-- <view class="text" :style="{color: config.index_border_color}">
								<text>平均步数:{{parseInt(item.step)}}</text>
								<text>900万步</text>
							</view> -->
							<u-line-progress style="position: relative;" height="40" striped :striped-active="true" :active-color="config.index_border_color" :percent="parseInt((item.step < 20000 ? item.step : 20000 )/200)">
								<text style="color: #333333;position: absolute; left: 0;top: 0;width: 100%;text-align: center;">{{parseInt(item.step || 0)}}步</text>
							</u-line-progress>
						</view>
					</view>
					<view class="icon-box">
						<image class="icon" :src="config.list_item_right_icon" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="one-box" v-for="(item,index) in itemList" :key="index"  @click="toPage('/pages/ranking/ranking?aid='+item.aid + '&name=' + item.area)" :style="{borderColor: config.index_border_color}">
					<view class="item">
						<view class="number-box">
							<view class="number" :style="{backgroundColor: config.index_border_color}">
								{{index + 4}}
							</view>
							<view class="name">
								{{item.area}}
							</view>
						</view>
						<view class="step-box">
							<!-- <view class="step" :style="{backgroundColor: config.index_border_color}">
								平均步数{{parseInt(item.step)}}步
							</view> -->
							<view class="icon">
								<image class="img" :src="config.list_item_right_icon" mode="scaleToFill"></image>
							</view>
						</view>
					</view>
					<u-line-progress style="position: relative;" height="40" striped :striped-active="true" :active-color="config.index_border_color" :percent="parseInt((item.step < 20000 ? item.step : 20000 ) / 200)">
						<text style="color: #333333;position: absolute; left: 0;top: 0;width: 100%;text-align: center;">{{parseInt(item.step || 0)}}步</text>
					</u-line-progress>
				</view>
			</view>
		</scroll-view>
		<view class="popup-box" v-show="showPopup && !showPopupStatus">
			<view class="content-box" :style="'background-image:url(' + config.index_popup_bc +')'">
				<view class="box">
					<view class="item-box">
						<view class="title">
							个人总步数
						</view>
						<view class="p-info-box">
							<view class="one">
								<view class="label">
									今日步数
								</view>
								<view class="value">
									{{popupData.dayPersionStepSum}} <text class="small">步</text>
								</view>
							</view>
							<view class="one">
								<view class="label">
									形成公益金
								</view>
								<view class="value">
									{{(popupData.dayPersionStepSum < 10000) ? 0 : (popupData.dayPersionStepSum < 20000) ? 1 : 2}} <text class="small">元</text>
								</view>
							</view>
							<view class="one">
								<view class="label">
									累计步数
								</view>
								<view class="value">
									{{popupData.persionStepSum}} <text class="small">步</text>
								</view>
							</view>
							<view class="one">
								<view class="label">
									形成公益金
								</view>
								<view class="value">
									{{popupData.persionMoney}} <text class="small">元</text>
								</view>
							</view>
						</view>
					</view>
					<view class="item-box">
						<view class="title">
							分区总步数
						</view>
						<view class="p-info-box">
							<view class="one">
								<view class="label">
									今日步数
								</view>
								<view class="value">
									{{popupData.dayCompanyStepSum}} <text class="small">步</text>
								</view>
							</view>
							<view class="one">
								<view class="label">
									形成公益金
								</view>
								<view class="value">
									{{popupData.dayCompanyMoney}} <text class="small">元</text>
								</view>
							</view>
						</view>
						<view class="p-info-box">
							<view class="one">
								<view class="label">
									累计总步数
								</view>
								<view class="value">
									{{popupData.companyStepSum}} <text class="small">步</text>
								</view>
							</view>
							<view class="one">
								<view class="label">
									形成公益金
								</view>
								<view class="value">
									{{popupData.companyMoney}} <text class="small">元</text>
								</view>
							</view>
						</view>
					</view>
					<view class="item-box">
						<view class="title">
							活动总步数
						</view>
						<view class="p-info-box">
							<view class="one">
								<view class="label">
									今日步数
								</view>
								<view class="value">
									{{popupData.dayActivityStepSum}} <text class="small">步</text>
								</view>
							</view>
							<view class="one">
								<view class="label">
									形成公益金
								</view>
								<view class="value">
									{{popupData.daySumMoney}} <text class="small">元</text>
								</view>
							</view>
						</view>
						<view class="p-info-box">
							<view class="one">
								<view class="label">
									累计总步数
								</view>
								<view class="value">
									{{popupData.activityStepSum}} <text class="small">步</text>
								</view>
							</view>
							<view class="one">
								<view class="label">
									形成公益金
								</view>
								<view class="value">
									{{popupData.sumMoney}} <text class="small">元</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="close-btn">
				<image @click="showPopup=false,showPopupStatus=true" class="icon" :src="config.close_icon" mode="scaleToFill"></image>
			</view>
			<view class="tips">
				本次公益活动由汇志凌云举办
			</view>
			
		</view>
	</view>
	<view v-else class="page-index" :style="'background-image: url('+ config.index_bc + ')'">
		<u-swiper :list="config.banner_list" height="525"></u-swiper>
		<view class="info-box" :style="'border-color:' + config.index_border_color">
			<view class="head-box">
				<view class="head">
					<view class="left">
						<view class="item" @click="toPage('/pages/wxlogin/wxlogin')">
							<u-avatar :src="userInfo.headImg" :size="88"></u-avatar>
							<text class="text">点击登录</text>
						</view>
					</view>
					<view class="right">
						<u-circle-progress v-if="!showPopup" :active-color="config.circle_progress_color" :percent="0" :width="172"
							:border-width="10">
							<view class="progress-content" :style="'color:'+config.circle_progress_color">
								{{0}}
							</view>
						</u-circle-progress>
						<image class="icon" :src="config.right_icon_1" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="bottom-text">
					<view class="text">
						<image class="icon" src="../../static/images/love.png" mode="scaleToFill"></image>
						感谢您为汇志凌云公益基金所捐赠的{{0}}元钱
					</view>
					<view>
						{{new Date() | date}}
					</view>
				</view>
			</view>
		</view>
		<view class="title-box">
			<view class="title">
				战队排行榜
			</view>
			<view class="more">
				<text class="more-text" :style="'color:#333333'">更多</text>
				<image class="icon" :src="config.index_more_icon" mode="scaleToFill"></image>
			</view>
		</view>
		<scroll-view scroll-y="true"  class="list-box">
			<view class="no-tips">
				暂无数据
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	let vm;
	export default {
		data() {
			return {
				config: {
					banner_list: [],
					index_bc: '',
					index_popup_bc: '',
					index_border_color: '',
					circle_progress_color: '',
					right_icon_1: '',
					index_more_icon: '',
					top_three_item_border: '',
					top_one_img: '',
					top_two_img: '',
					top_three_img: '',
					list_item_right_icon: '',
					close_icon: '',
					target_steps: ''
				},
				headImg: '',
				showPopup: false,
				showPopupStatus: false,
				todaySteps: 0,
				tips: '',
				percent: 0,
				money: 0,
				topList: [],
				iconList: ['top_one_img', 'top_two_img', 'top_three_img'], // 奖牌图标
				itemList: [],
				popupData: {
					activityStepSum: 0,
					companyMoney: 0,
					companyStepSum: 0,
					dayActivityStepSum: 0,
					dayCompanyMoney: 0,
					dayCompanyStepSum: 0,
					dayPersionStepSum: 0,
					daySumMoney: 0,
					persionMoney: 0,
					persionStepSum: 0,
					sumMoney: 0
				}
			}
		},
		onLoad() {
			vm = this
			if(this.configComplete && this.isLogin) {
				this.getRinkingList()
			}
		},
		onShow() {
			if(this.configComplete && this.isLogin) this.updateWerun()
		},
		methods: {
			toPage(url) {
				console.log(url)
				uni.navigateTo({
					url,
					fail(err) {
						console.log(err)
					}
				})
			},
			async updateWerun() {
				const [err, res] = await uni.getSetting();
				if(err) return
				if(res.errMsg=='getSetting:ok' && res.authSetting['scope.werun']) {
					const [loginErr, loginRes] = await uni.login({provider: 'weixin'});
					const [runErr, runRes] = await uni.getWeRunData();
					if(runErr) {
						uni.showToast({
							title: '获取微信运动数据失败',
							icon: 'none'
						})
						return
					}
					const reqData = {
						jsCode: loginRes.code,
						iv: runRes.iv,
						encryptedData: runRes.encryptedData,
					}
					const [res, err] = await vm.$post('xcx/getUserStepNum', reqData);
					if(err) {
						if(err.data.code == 400 && err.data.msg == '用户不存在') {
							uni.showToast({
								title: '登录已过期请重新登录',
								icon: 'none'
							})
							setTimeout(() => {
								vm.logout()
							}, 3000)
						}
						return
					}
					vm.todaySteps = res.data.step;
					vm.money = res.data.money;
					if(vm.todaySteps < 10000) {
						vm.tips = '10000';
						vm.percent = parseInt(vm.todaySteps / 10000)
					}
					if(vm.todaySteps >= 10000) {
						vm.tips = '20000';
						vm.percent = 100
					}
					if(!vm.showPopupStatus) this.getPopupData()
					this.getRinkingList()
				}else {
					uni.authorize({
						scope: 'scope.werun',
						success: this.updateWerun,
						fail() {
							uni.showModal({
							    title: '提示',
							    content: '您未开启微信运动授权,是否前往前往设置',
							    success: function (res) {
							        if (res.confirm) {
							            uni.openSetting()
							        }
							    }
							});
						}
					})
				}
			},
			async getRinkingList() {
				if(!this.userInfo && !this.userInfo.uid) return
				uni.showLoading()
				const reqData = {
					pageIndex: 1,
					pageSize: 10,
					uid: this.userInfo.uid,
					tag: 1
				}
				const [res, err] = await this.$get('xcx/findCompanyRange', reqData);
				uni.hideLoading()
				const allList = res.data.list;
				const topList = [];
				const itemList = [];
				allList.forEach((item, index) => {
					if(index<3) topList.push(item)
					else itemList.push(item)
				})
				vm.topList = topList;
				vm.itemList = itemList;
			},
			async getPopupData() {
				if(!vm.userInfo && !vm.userInfo.uid) return
				const reqData = {
					uid: vm.userInfo.uid,
					cmId: vm.userInfo.cmId
				}
				const [res, err] = await vm.$get('xcx/findStepSum', reqData);
				vm.popupData = res.data
				if(!vm.showPopupStatus) vm.showPopup = true
			}
		}
	}
</script>

<style lang="scss">
	.loading-box {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.page-index {
		width: 100%;
		height: 100%;
		background-size: 48% auto;
		background-repeat: no-repeat;
		background-position: 536rpx 729rpx;

		.info-box {
			width: 690rpx;
			height: 320rpx;
			background: #FFFFFF;
			border-width: 4rpx;
			border-style: solid;
			box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.16);
			border-radius: 20rpx;
			margin: 36rpx 30rpx;
			box-sizing: border-box;
			padding: 28rpx;

			.head-box {
				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.left .item {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.text {
						font-size: 28rpx;
						font-weight: bold;
						line-height: 38rpx;
						color: #333333;
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						
						.name {
							font-size: 28rpx;
						}
						
						.area {
							font-size: 24rpx;
							color: #333333;
						}
					}
				}

				.right {
					.progress-content {
						font-size: 38rpx;
						font-weight: bold;
					}

					.icon {
						width: 23rpx;
						height: 29rpx;
						margin-left: 24rpx;
					}
				}
			}

			.bottom-text {
				min-height: 80rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				color: #ACA5A5;
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				flex-wrap: wrap;
				align-items: center;

				.text {
					font-size: 24rpx;
					display: flex;
					align-items: center;
				}

				.icon {
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
				
				.b-tips {
					width: calc(100% - 50rpx);
				}
			}
		}

		.title-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 38rpx;
			box-sizing: border-box;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				
				.tips {
					font-size: 20rpx;
					font-weight: normal;
				}
			}

			.more {
				font-size: 28rpx;
				line-height: 48rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 12rpx;
				}
			}
		}
	
		.list-box {
			width: 100%;
			height: calc(100% - 528rpx - 320rpx - 72rpx - 58rpx);
			
			.item-box {
				width: 100%;
				padding: 40rpx 28rpx;
				box-sizing: border-box;
				
				.top-three-item {
					width: 100%;
					height: 310rpx;
					background-repeat: no-repeat;
					background-size: 100% auto;
					padding: 20rpx 30rpx 30rpx 28rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.content-box {
						flex: 1;
						
						.progress-box {
							margin-top: 10rpx;
							
							.text {
								width: 100%;
								font-size: 20rpx;
								line-height: 34rpx;
								display: flex;
								justify-content: space-between;
							}
						}
					}
					
					.item-info-box {
						height: 170rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.left {
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							
							.title {
								font-size: 32rpx;
								line-height: 48rpx;
								color: #333333;
								text-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
							}
							.user-head-list {
								height: 72rpx;
								position: relative;
								
								.head-item {
									width: 70rpx;
									height: 70rpx;
									position: absolute;
									// border: 4rpx solid #4EB3A3;
									// border-radius: 50%;
									box-sizing: border-box;
								}
							}
						}
					}
					.icon-box {
						margin-left: 20rpx;
						
						.icon {
							width: 23rpx;
							height: 29rpx;
						}
					}
				}
				
				.one-box {
					width: 672rpx;
					border: 2rpx solid #2A83CA;
					border-radius: 20rpx;
					margin: 0 auto 20rpx auto;
					padding: 20rpx 20rpx 20rpx 26rpx;
					box-sizing: border-box;
				}
				
				.item {
					width: 100%;
					height: 98rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.number-box {
						display: flex;
						align-items: center;
						
						.number {
							width: 78rpx;
							height: 58rpx;
							background: #2A83CA;
							opacity: 1;
							font-size: 40rpx;
							line-height: 58rpx;
							color: #FFFFFF;
							text-align: center;
							border-radius: 10rpx;
						}
						
						.name {
							font-size: 28rpx;
							line-height: 48rpx;
							color: #333333;
							text-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.16);
							margin-left: 18rpx;
						}
					}
				
					.step-box {
						display: flex;
						align-items: center;
						
						.step {
							width: 140rpx;
							height: 46rpx;
							background: #2A83CA;
							opacity: 1;
							border-radius: 10rpx;
							font-size: 20rpx;
							line-height: 34rpx;
							color: #FFFFFF;
							line-height: 46rpx;
							text-align: center;
						}
						
						.icon {
							width: 23rpx;
							height: 29rpx;
							margin-left: 20rpx;
							
							.img {
								width: 23rpx;
								height: 29rpx;
							}
						}
					}
				}
			}
		}
		
		.popup-box {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,.8);
			
			.content-box {
				width: 700rpx;
				height: 1059rpx;
				margin: 82rpx auto 0 auto;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding: 300rpx 44rpx 106rpx 44rpx;
				box-sizing: border-box;
				
				.box {
					width: 100%;
					height: 100%;
					padding: 14rpx 10rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.item-box {
						.title {
							color: #E5404F;
							text-align: center;
							font-size: 28rpx;
							margin-top: 10rpx;
							margin-bottom: 20rpx;
						}
						
						.p-info-box {
							width: 100%;
							display: flex;
							justify-content: space-between;
							
							.one {
								flex: 1;
								display: flex;
								flex-direction: column;
								align-items: center;
								
								.label {
									font-size: 20rpx;
								}
								.value {
									line-height: 60rpx;
									font-size: 24rpx;
									
									.small {
										font-size: 14rpx;
									}
								}
							}
						}
					}
				}
			}
			
			.tips {
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				margin-top: 20rpx;
			}
			
			.close-btn {
				display: flex;
				justify-content: center;
				margin-top: 42rpx;
				
				.icon {
					width: 64rpx;
					height: 64rpx;
				}
			}
		}
		
		.no-tips {
			height: 80rpx;
			line-height: 80rpx;
			width: 100%;
			text-align: center;
		}
	}
</style>
